<template>
	<view>
		<!-- 若需显示自定义导航栏，需要在App.vue中引入Vue -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">{{hotel.hName}}</block>
		</cu-custom>
		
		<scroll-view scroll-y="true" >
			<view>
				<swiper class="screen-swiper" :class="'round-dot'" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
				 duration="500">
					<swiper-item v-for="(item,index) in imageList" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				
				<view class="baseInfo" style="">
					<view class="baseInfoView">
						<view class="name"><b>{{hotel.hName}}</b></view>
						<view class="hotelTag">
							<view class='cu-tag'>免押金</view>
							<view class='cu-tag'>闪退</view>
						</view>
					</view>
					
					<view class="priceView">
						<view class="price">￥{{hotel.hPrice}}/晚</view>
					</view>	
				</view>
				
				<view class="roomInfo">
					<view class="spaceInfo">
						<image src="../../static/minsu.png" style="width: 100upx; height: 100upx; margin-left: 22upx;"></image>
						<view class="spaceInfoLabel">
							<view>{{hotel.hRoom}} 居室 · 整套房屋</view>
							<view>{{hotel.hRoom}} 室 {{hotel.hHall}} 厅 {{hotel.hToilet}} 卫 · {{hotel.hSize}} ㎡</view>
						</view>
					</view>
					<view class="bedInfo">
						<image src="../../static/chuangwei.png" style="width: 100upx; height: 100upx;"></image>
						<view class="spaceInfoLabel">
							<view>可住 {{hotel.hPeople}} 人 </view>
							<view>{{hotel.hBedCount}} 张床位</view>
						</view>
					</view>
				</view>
				
				<view class="addressInfo">
					<view class="addressLabel infoLabel"><text class="cuIcon-title text-purple"></text>位置信息：</view>
					<map  :scale="12" :latitude="longitude" :longitude="latitude" 
					:markers="markers" 
					style="width: 700upx; height: 300upx;border-radius: 30upx; margin: 0 auto; padding-bottom: 25upx;"
					></map>
					
				</view>
				
				<view class="serviceInfo">
					<view class="infoLabel"><text class="cuIcon-title text-green"></text>温馨提示</view>
					<view class="serviceInfoContent">
						 <text>尊敬的各位贵宾:\n为了您和他人能享受到更加完美的服务，请爱惜宾馆内一切公用设施。请保持良好的修养和公德心，不要用床上用品或面巾浴巾窗帘等作抹布使用。需要抹布搽拭清洁的，找老板帮助解决。损坏物品或故意污染用品的会将按照物品原件赔偿。进客房时发现异常请立即通知老板，否则视为一切完好。\n一、入住须知\n1、客房结帐时间为中午12时，如需延住，请您提前通知老板。\n2、延期退房按如下标准收费:退房时间为第二天中午12: 00，若超过12: 00 则按第二天收费;午休房午休时间超过5个小时按照全天收费。\n3、退房后，请您勿忘将钥匙交还老板。</text>
					</view>
				</view>
				
			</view>
		</scroll-view>

		
		<view class="bottomBar">
			<view class="cu-bar bg-white tabbar border shop">
				<button class="action">
					<view class="cuIcon-home">
					</view>
					回首页
				</button>
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-green">
						<view class="cu-tag badge"></view>
					</view>
					客服
				</button>
		
		
				<view class="bg-gradual-green submit" hover-class="navigator-hover" hover-start-time="0" hover-stay-time="200" @click="toBuy">
					立 即 预 定
				</view>
		
		
			</view>
		</view>
	</view>
</template>

<script>
	import { getHomestayById } from '../../api/homestayAPI.js'
	import { isLogin } from '../../utils/util.js'
	export default {
		data() {
			return {
				latitude:'114.139366',
				longitude:'38.763557',
				imageList: [],
				hotel: {
					hStatus: "1",
					hId: "2002",
					hTag: "[Ljava.lang.String;@17a79f65;",
					hRoom: "2",
					hAddress: "阜平县坊里村",
					hTitleImage: "images/homestay/2002/2002-0.jpg",
					hDetailImage: "images/homestay/2002/2002-0.jpg;images/homestay/2002/2002-1.jpg;images/homestay/2002/2002-2.jpg;images/homestay/2002/2002-3.jpg",
					hSize: "40",
					hPosition: "114.139366;38.763557",
					hName: "树屋民宿",
					hBedCount: "1",
					hPrice: "429",
					hPhone: "",
					hPeople: "2",
					hToilet: "1",
					hHall: "1",
					hAspect: "1",
					hDescription: "独特别致",
					hRemark: ""
				},
				
				markers : []
			};
		},
		methods:{
			toBuy() {
				if(isLogin()) {
					uni.setStorage({
						key:'hotelId',
						data:this.hotel.hId
					})
					uni.navigateTo({
						url:'../hotelOrderInput/hotelOrderInput'
					})
				}
				
			}
		},
		onLoad(params) {
			let id = params.id;
			if( null == id ) {
				id = 2002
			}
			getHomestayById(id).then(resp => {
				this.hotel = resp
				let xy = this.hotel.hPosition.split(";")
				this.latitude = xy[0]
				this.longitude = xy[1]
				this.markers = [{
					id: '1',
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '../../static/location.png',
					callout: {
						content: this.hotel.hAddress
					}
				}]
				const imgList = this.hotel.hDetailImage.split(";")
				const arr = []
				imgList.forEach((s,index)=>{
					if ('' != s) {
						var img = getApp().globalData.serverUrl + s
						arr.push(img)
					}
					
				})
				this.imageList = arr
			})
			
			
		}
	}
</script>

<style>
	@import url("./hotelDetail.css");
</style>
